<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>博客列表</title>
    <link href="common.css" rel="stylesheet">
    <link href="blog_list.css" rel="stylesheet">
</head>
<body>
    <div class="nav">
        <img src="D:\Git\java\JavaSenior\blog_system\src\main\resources\img\89333026_p0_master1200.jpg">
        <span class="title">我的博客系统</span>
        <!--spacer来占位-->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="logout">注销</a>
    </div>
    <!--这个div表示页面的主区-->
    <div class="container">
        <!--左侧用户区-->
        <div class="container-left">
            <!--用这个元素表示用户信息-->
            <div class="card">
                <!--用户头像-->
                <img alt="" src="D:\Git\java\JavaSenior\blog_system\src\main\resources\img\89333026_p0_master1200.jpg">
                <!--用户名字-->
                <h3></h3>
                <!--github地址-->
                <a href="#">github地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>
        <!--右侧内容区-->
        <div class="container-right">
            <!--每个.blog表示一篇博客-->
            <!-- <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022年11月13日16:48:33</div>
                <div class="desc">
                    从今天起，你干嘛哎哟喂，Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ex nostrum iusto possimus, quidem blanditiis ut accusamus nulla excepturi illo nobis rerum natus quisquam sapiente nam saepe placeat voluptate voluptatibus temporibus?
                </div> -->
            </div>
        </div>
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/app.js"></script>
    <script>
        //发送ajax从服务器  获取数据
        function getBlogs(){
            $.ajax({
                type:'get',
                url:'blog',
                success:function(body){
                    //获取成功,则body是一个js对象数组，每个元素就是一个博客
                    let container=document.querySelector('.container-right');
                    for(let blog of body){
                        //构造 blogDiv
                        let blogDiv=document.createElement('div');
                        blogDiv.className='blog';
                        //构造博客标题
                        let titleDiv=document.createElement('div');
                        titleDiv.className='title';
                        titleDiv.innerHTML=blog.title;

                        //构造博客日期
                        let dateDiv=document.createElement('div');
                        dateDiv.className='date';
                        dateDiv.innerHTML=blog.postTime;
                        //构造博客的摘要
                        let descDiv=document.createElement('div');
                        descDiv.className='desc';
                        descDiv.innerHTML=blog.content;
                        //构造查看全文按钮
                        let a=document.createAttribute('a');
                        a.href='blog_detai.html?blogId='+blog.blogId;
                        a.innerHTML='查看全文 &gt;&gt;';
                        
                        //拼装最终结果
                        blogDiv.appendChild(titleDiv);
                        blogDiv.appendChild(dateDiv);
                        blogDiv.appendChild(descDiv);
                        blogDiv.appendChild(a);
                        container.appendChild(blogDiv);
                    }
                }
            });
        }
        //函数调用
        getBlogs();
        getLoginStatus();

        //针对博客列表页，获取到当前用户的登陆信息
        function getUseInfo(){
            $.ajax({
                type:'get',
                url:'userInfo',
                success:function(body){
                    //获取成功，body就是一个user对象
                    //把user对象里的内容填写到页面上
                    //此处主要填用户名，github地址，头像
                    let h3=document.querySelector('.container-left>.card>h3');
                    h3.innerHTML=body.username;

                }
            });
        }
        getUseInfo();
    </script>
</body>
</html>